import React, { Component } from 'react'
import { connect } from 'react-redux';
import { add_action, rem_action, qk_action } from '../store/store';

class Gwc extends Component {
    render() {
        return (
            <div className="gwc">
                <div className="top" onClick={() => { this.props.tcclick() }}></div>
                <div className="list">
                    <div className="header">
                        <h3>已选商品</h3><h3 onClick={() => { this.props.qk() }}>清空</h3>
                    </div>
                    <div className="yxsj">
                        {
                            this.props.gwclist.map((item, index) => {
                                return (
                                    <div className="item" key={index}>
                                        <div className="img"><img src={item.pic} alt="" /></div>
                                        <div className="text">
                                            <h4 className="name">{item.name}</h4>
                                            <div className="title">{item.title}</div>
                                            <div className="price">￥：{item.price}</div>
                                        </div>
                                        <div className="btn">
                                            <span onClick={() => { this.props.rem(item) }}>-</span>
                                            {item.count}
                                            <span onClick={() => { this.props.add(item) }}>+</span>
                                        </div>
                                    </div>
                                )
                            })
                        }
                        <div className="foot">
                            <div>购物车</div>
                            <div>总价：{
                                this.props.gwclist.length > 0 &&
                                this.props.gwclist.reduce((a, b) => {
                                    return a + b.count * b.price
                                }, 0)
                            }元</div>
                            <div>去结算</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect(
    (state) => {
        return {
            gwclist: state.gwclist
        }
    },
    (dispatch) => {
        return {
            add: (item) => {
                dispatch(add_action(item))
            },
            rem: (item) => {
                dispatch(rem_action(item))
            },
            qk: () => {
                dispatch(qk_action())
            }
        }
    }
)(Gwc)